<template>
    <div>
        <!-- 
            v-for 数据循环指令
            语法：
            与forEach的使用方式进行联合记忆，它的每次循环得到的数据和索引的用法与forEach完全一样
            1. v-for="(value, index) in 目标数据结构"
            2. v-for="value in 目标数据结构"
            
            在v-for循环体中，必须为每一个循环标签加上一个key属性来表示当前标签的唯一性
        -->
        <!-- 1. 循环简单数组 -->
        <div>
            <p v-for="(value, index) in arr" :key="index">
                {{ value }} ----- {{ index }}
            </p>
        </div>
        
        <!-- 2. 循环复杂数组 => 数组对象 -->
        <div>
            <p v-for="(value, index) in arr2" :key="index.id">
                {{ value.name }} ----- {{ value.age }}
            </p>
        </div>
        
        <!-- 
            3. 循环对象 
            参数1：属性值
            参数2：属性名
        -->
        <div>
            <p v-for="(value, key) in obj" :key="key">
                {{ key }} ----- {{ value }}
            </p>
        </div>
        
        <!-- 
            4. 循环数字 
            参数1：从1开始计数到最后的自然数
            参数2：索引从0开始计数
        -->
        <div>
            <p v-for="(value, index) in 10" :key="index">
                {{ value }} ------ {{ index }}
            </p>
        </div>
        
        <!-- 
            5. 循环字符串 
            参数1：字符串的每一个字符
            参数2：字符所在的下标，从0开始计数
        -->
        <div>
            <p v-for="(value, index) in 'qwergfsdfgsfd'" :key="index">
                {{ value }} ------ {{ index }}
            </p>
        </div>
        
        <div>
            <p v-for="(value, index) in '邓意祥'" :key="index">
                {{ value }} ------ {{ index }}
            </p>
        </div>

        <!-- 
            v-for 会比 v-if 有更高的优先级，那么数据渲染出来以后才会进行v-if判断，一增一删毫无意义，所以不希望在同一个标签中使用v-if
            解决方案： 直接把v-if中的逻辑判断放到filter的函数执行体中即可
         -->
        <div>
            <!-- <p v-for="(value, index) in arr3" :key="index" v-if="value >= 3">
                {{ value }} ------ {{ index }}
            </p> -->
            <p v-for="(value, index) in arr3.filter(value => value >= 3)" :key="index">
                {{ value }} ------ {{ index }}
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DemoIndex9',
    data() {
        return {
            arr: ['a', 'b', 'c', 'd', 'e'],
            arr2: [
                { name: 'cxk', age: 24, id: 1 },
                { name: 'lbw', age: 30, id: 2 }
            ],
            obj: {
                name: 'cgx',
                age: '30',
                group: 'SJ'
            },
            arr3: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        }
    },
}
</script>

<style>

</style>